<template>
	<view class="nav-bar-white">
		<view :style="{height:statusBarHeight+'px'}"></view>
		<uni-nav-bar left-icon="left" background-color="#FFF" color="#000" @clickLeft="back" title="售后订单" :border="false" fixed="true"></uni-nav-bar>
	</view>
	<view class="page" :style="{marginTop:statusBarHeight+45+'px'}">
		<view class="flex-row justify-around" style="padding-top: 10rpx;background-color: #fff;padding-bottom: 10rpx;">
			<view class="search-bg">
				<uni-combox style="width: 24vw;" :isDisabled="true" :showClear="false" labelKey="name" valueKey="id" :candidates="candidates" placeholder="订单编号" v-model="searchTitle" :border="false" @input="select"></uni-combox>
				<input v-model="seachContent" class="seach-input" maxlength="11" placeholder="请输入搜索内容" />
			</view>
			<view class="flex-row screen-text" @click="openPop">
				<image src="/static/goods/goods_1.png" style="width: 30rpx;height: 30rpx;"></image>
				<text style="color: #999999;margin-left: 10rpx;">筛选</text>
			</view>
		</view>
		<view class="flex-row justify-around fixed-header" :style="{top:statusBarHeight+44+'px'}" style="position: sticky;border-bottom: 1px solid #E6E6E8;">
			<view v-for="(item, index) in topList" :key="index"
				:class="[item.default ? 'screen-item-avtive' : 'screen-item']" @click="changeTabs(item)">{{ item.name
				}}</view>
		</view>
		
	</view>
</template>

<script>
	import { useUserStore } from '../../store/userStore';
	export default {
		data() {
			return {
				status:'0',
				searchTitle:'',
				seachContent:'',
				candidates:[
					{
						name:'订单编号',
						id:'1'
					},
					{
						name:'组合订单',
						id:'2'
					},
					{
						name:'手机号码',
						id:'3'
					},
					{
						name:'商品名称',
						id:'4'
					},
					{
						name:'用户ID',
						id:'5'
					},
					{
						name:'物流单号',
						id:'6'
					},
					{
						name:'商品ID',
						id:'7'
					},
				],
				topList:[
					{
						name: '全部',
						default: true,
						id: 0
					}, {
						name: '待处理',
						default: false,
						id: 1
					}, {
						name: '待寄回',
						default: false,
						id: 2
					},{
						name: '已退款',
						default: false,
						id: 3
					}
				]
			};
		},
		computed:{
			statusBarHeight(){
				return useUserStore().statusBarHeight
			}
		},
		methods:{
			changeTabs(item){
				let obj = this.topList.find(v => v.default)
				if (obj) {
					obj.default = false
					item.default = true
				}
				this.status = item.id
			},
			select(e) {
				console.log(e) // 选项一
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
.page {
	width: 100%;
	// overflow-y: auto;
	// overflow-x: hidden;
	height: 100%;
	min-height: 90vh;
	background-color: #F5F6F7;
}
.search-bg{
	display: flex;
	flex-direction: row;
	background-color: #F3F3F3;
	border-radius: 45rpx;
	height: 80rpx;
	margin-left: 20rpx;
	align-items: center;
	padding-left: 30rpx;
	padding-right: 20rpx;
}
.screen-text{
	width: 30%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.fixed-header{
	background-color: white;
	z-index: 1;
}	
.screen-item-avtive {
	position: relative;
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	color: #428AF6;
	letter-spacing: 2rpx;
	padding: 24rpx 0;
}
.screen-item {
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC;
	color: #333;
	letter-spacing: 2rpx;
	padding: 24rpx 0;
}
.screen-item-avtive::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	height: 4rpx;
	background-color: #428AF6;
	width: 50%;
	transform: translateX(-50%);
	border-radius: 4rpx;
	
	// transition: all .5s linear;
	animation: change 1s linear;
}
@keyframes change {
	0% {
		width: 50%;
	}

	50% {
		width: 100%;
	}

	100% {
		width: 50%;
	}
}
</style>
